var dialog = {
  el: $('#dialog'),
  setHtml: function (className, btn0, btn1) {
    var style = ''
    var bgStyle = ''
    try {
      // [背景\标题\规则\暂停\完成\按钮组]
      var bg = ''
      var sub = page.data.bgs[8].subColumn
      switch (className) {
        case 'init':
          bg = sub[2].typePicture[0].picPath3
          break;
        case 'stop':
          bg = sub[3].typePicture[0].picPath3;
          break;
        case 'pass':
          bg = sub[4].typePicture[0].picPath3;
          break;
        case 'over':
          bg = sub[5].typePicture[0].picPath3;
          break;
      }
      if (bg) {
        style = 'style="background-image:url(' + bg + ')"'
        
      }
      if (sub[6]) {
        bgStyle = 'style="background-image:url(' + sub[6].typePicture[0].picPath3 + ')"'
      }
    } catch (error) {
      
    }
    
    
    var html = '<div ' + style + ' id="' + className + '"><div class="btn-group">' + 
      '<div ' + bgStyle + ' class="btn ' + btn0 + ' item" id="dialog-0"></div>' + 
      '<div ' + bgStyle + ' class="btn focus ' + btn1 + ' item " id="dialog-1"></div>' +
    '</div></div>'
    return html
  },
  over: function () {
    var html = this.setHtml('over', 'btn-0', 'btn-1')
    this.el.html(html)
  },
  init: function () {
    var html = this.setHtml('init', 'btn-0', 'btn-3')
    this.el.html(html)
  },
  stop: function () {
    var html = this.setHtml('stop', 'btn-0', 'btn-1')
    this.el.html(html)
  },
  pass: function () {
    var html = this.setHtml('pass', 'btn-0', 'btn-2')
    this.el.html(html)
  }
}

// var MAP_TYPES = {
//   init: ['<div class="dialog" id="init">', '<div></div>','</div>']
// }
// ['init', 'pause', 'finish', 'over']

var game1 = {
  seriesId: '',
  time: 0,
  // countdown: 0,
  timer: null,
  detail: null,
  // image: './images/templates/game1.png',
  // rows: 3,
  // cols: 3,
  width: 420,
  height: 420,
  data: [],
  sortList: [],
  navList: [],
  dialogType: '',
  init: function (seriesId) {
    if (!seriesId) return 
    this.seriesId = seriesId
    this.getDitail()
    this.renderStatic()
    this.render()
  },
  renderStatic: function () {
    var bgs = page.data.bgs[8]
    if (bgs) {
      var sub = bgs.subColumn // [背景\标题\规则\暂停\完成\按钮组]
      $('#main').css('background', 'url(' + sub[0].typePicture[0].picPath3 + ')')
      $('#title').css('background', 'url(' + sub[1].typePicture[0].picPath3 + ')')
    }
  },
  getDitail: function () {
    this.detail = getVodDetailInfo(this.seriesId)
    var introduce = this.detail.introduce
    if (!introduce || introduce.split('|').length == 1) {
      this.rows = this.cols = 3
      this.countdown = 300
    } else {
      var arr = introduce.split('|')
      this.rows = this.cols = arr[0] > 6 ? 6 : arr[0]
      this.countdown = arr[1] || 300
    }
  },
  render: function () {
    this.stop()
    this.time = 0
    var w = this.width / this.cols
    var h = this.height / this.rows
    var html = ''
    var img = this.detail.picture[0].picPath4
    this.data = []
    if (!img) return
    var t = 0
    var space = 5
    for (var row = 0; row < this.rows; row++) {
      for (var col = 0; col < this.cols; col++) {
        var obj = {}
        obj.width = w
        obj.height = h
        obj.id = this.cols * row + col
        obj.img = 'background-image: url(' + img + ');'
        obj.style = 'width:' + w + 'px;height:' + h + 'px;'
        obj.bgPos = 'background-position:' + -(col * w) + 'px ' + -(row * h) + 'px;'
        obj.pos = 'left:' + ((w + space ) * col) + 'px;top: ' + ((h + space) * row) + 'px;'
        obj.className = 'picture-' + ((this.cols * row) + col)
        this.data.push(obj)
        html += '<div id="right-' + obj.id + '" class="item picture ' + obj.className + '" style="'  + obj.style + obj.pos + obj.img +  obj.bgPos + '">' +
            // '<div class="mark"></div>' + 
          '</div>'
      }
      t += (w + space)
    }
    console.log(t);
    $('#right-container').css({
      top: (520 - t) / 2,
      left: (520 - t) / 2
    })
    $('#right-container').html(html)
    this.sort()
  },
  sort: function () {
    this.sortList = this.data.slice()
    this.sortList.sort(function (a, b) {
      var aId = a.id
      var bId = b.id
      return Math.random() > 0.5 ? aId - bId : bId - aId
    })
    this.renderLeft();
    $('#left-0').addClass('focus')
  },
  renderLeft: function () {
    this.navList = this.sortList.splice(0, this.rows)
    var html = ''
    var t = 0
    var img = this.detail.picture[0].picPath3
    for (var i = 0; i < this.navList.length; i++) {
      var obj = this.navList[i]
      var height = obj.height
      var width = obj.width
      var className = i === 0 ? 'active focus' : ''
      var style = 'width: ' + height + 'px;height: ' + height + 'px;left: ' + (160 - width) / 2 + 'px;top: ' + ((10 + height) * i) + 'px;'
      html += '<div id="left-' + i + '" class="item picture ' + className + '" style="' + style + '" >' + 
        '<div class="left-picture" id="picture-' + obj.id + '" style="background-image: url(' + img + ');' +  obj.bgPos + 'z-index: 11;"></div>' + 
        '<div class="mark" style="width: ' + (width + 8) + 'px;height: ' + (height + 8) + 'px;"></div>' + 
      '</div>'
      t += height + 10
    }
    $('#left-view').css({
      height: t,
      top: (520 - t) / 2
    })
    $('#left-container').html(html)
  },
  start: function () {
    var _this = this
    _this.setTime()
    _this.timer = setInterval(function () {
      if ( _this.countdown === 0) {
        _this.stop()
        _this.showDialog('over')
        return false;
      }
      _this.time++
      _this.countdown--
      _this.setTime()
    }, 1000);
  },
  stop: function () {
    clearInterval(this.timer)
    this.timer = null
  },
  showDialog: function (type) {
    if (!type) return
    this.stop()
    this.dialogType = type
    dialog[type]()
  },
  hideDialog: function () {
    this.dialogType = ''
    dialog.el.html('')
  },
  setTime: function () {
    var current = utils.formatTime(this.time)
    var countdown = utils.formatTime(this.countdown)
    $('#countdown').html(countdown)
    $('#current').html(current)
  }
}